<template>
  <cml-module-item :title="titleText" :titleMore="titleMore" v-bind="$attrs" v-on="$listeners">
    <a-switch
      size="small"
      :disabled="!isReady"
      :loading="rloading"
      :checked="isStart"
      @change="change"
    />
    <template v-slot:detail>
      <face-recognize-more></face-recognize-more>
    </template>
  </cml-module-item>
</template>
<script>
import { Switch } from 'ant-design-vue'
import CmlModuleItem from '../../cml-module-item'
import FaceRecognizeMore from './morePanel'
import * as anov from 'anov-core'

export default {
  name: 'FaceRecognize',
  inheritAttrs: false,
  components: {
    ASwitch: Switch,
    CmlModuleItem,
    FaceRecognizeMore
  },
  model: {},
  props: {},
  data() {
    return {
      rloading: false,
      isReady: true
    }
  },
  computed: {
    ...anov.faceRecognizeServer.mapState(['isStart']),
    ...anov.envServer.mapState(['videoStatus']),
    titleText() {
      return this.$t('cmlpanel.face')
    },
    titleMore() {
      return this.$t('cmlpanel.face')
    }
  },
  watch: {
    isStart(v) {
      this.change(v)
    }
  },
  created() {
    // this.isReady = rfs.isReady
  },
  mounted() {
    //初始化状态
    this.change(this.isStart)

    anov.faceRecognizeServer.addEventListener('start', this.onReady.bind(this))
    anov.faceRecognizeServer.addEventListener('error', this.onError.bind(this))

  },
  beforeDestroy() {},
  methods: {
    change(isStart) {
      if (isStart == this.isStart) return
      if (isStart) {
        if(!this.videoStatus){
          app.msg({type: 'error', content: '未检测到摄像头，无法开启人脸识别'})
          return;
        }
        this.rloading = isStart
        //启动
        anov.faceRecognizeServer.start()
      } else {
        //关闭
        anov.faceRecognizeServer.stop()
      }
      let msg = this.titleText+(isStart?this.$t('cmlpanel.start'):this.$t('cmlpanel.stop'))
      anov.voiceFeedbackServer.speak(msg)

      app.msg({type: 'info', content: msg})
    },
    onReady() {
      setTimeout(()=>{
        this.rloading = false
      },10)
    },
    onError(){
      this.change(false)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>